<template>
	<view>
		<!-- <u-navbar title="成员列表" :placeholder="true" :autoBack="true"></u-navbar> -->
		<headerinfo></headerinfo>
		<!-- <headertop :inv="4"></headertop> -->
				<backos></backos>
		<view class="xuanke">

			<view class="list" v-for="(item, index) in list" :key="index">
				<view class="title">
					<view>{{ item.username?item.username:item.nickname?item.nickname :' - ' }} </view>
					<image @click="toInfo(item)" v-if="item.avatar" :src="item.avatar" mode="aspectFill"
						style="width: 70rpx;height: 70rpx;border-radius: 50%;"></image>
				</view>
				<view class="main">
					<view class="box">
						<span>{{ item.phone ? item.phone : '-' }}</span>
						<span v-if="!item.username" @click="share(item)">邀请家人</span>
					</view>
				</view>
				<view class="main bodernone">
					<view class="box">
						<span>性别</span>
						<span>{{ item.sex == 'female' ?'女' : '男' }}</span>
					</view>
					<view class="box">
						<span>年龄</span>
						<span>{{ item.age ? item.age : '-' }}</span>
					</view>
					<view class="box">
						<span>出生日期</span>
						<span>{{ item.birthday ? item.birthday : '-' }}</span>
					</view>

				</view>
				
				<view class="btn" @click="toChat(item)">
					唠嗑
				</view>
			</view>
		</view>
		<u-popup :show="showShareDia" :round="10" mode="center" @close="showShareDia = false">
			<view class="showShare">
				<view id="imgimg" class="downLoadBox">
					<view class="title">
						邀请{{nowUser.nickname}}加入家庭
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<image :show-menu-by-longpress="true" :src="addimg" style="width: 500rpx;" mode="widthFix"></image>
					<view class="desc" style="text-align: center;font-size: 28rpx;color: #a8a4a4;">
						长按转发给朋友
					</view>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<tki-qrcode cid="qrcode1" ref="qrcode" :val="val" :size="size" :onval="onval" :loadMake="loadMake"
						:usingComponents="true" @result="qrR" />
					<!-- #endif -->
				</view>
				<view class="btns">
					<!-- #ifdef MP-WEIXIN -->
					<view style="width: 100%;"><button open-type="share" class="shareBtn"></button>直接分享</view>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view @click="copyaddress">复制地址</view>
					<view @click="saveQrcode">下载二维码</view>
					<!-- #endif -->
				</view>

			</view>

		</u-popup>
		
		<u-popup :show="chatDia" :round="10" mode="center" @close="chatDia = false" background-color="#fff">
			<view class="chatDiaBox">
				<view class="title">
					和亲人对话
				</view>
				<view class="check" @click="linkageVisible = true">
					{{guanxi?guanxi:'请选择和亲人的关系'}}
				</view>
				
				<view class="checkduihua" @click="start()">
					<view class="listbox">
						<view class="btn" >
							<span>立即开始</span>
						</view>
						
					</view>
				</view>
			</view>
		
		</u-popup>
		
		
		
		<w-picker :visible.sync="linkageVisible" mode="linkage" :options="options" :level="2" default-type="id"
			:default-props="defaultProps1" @confirm="onConfirmguanxi($event,'linkage')" ref="linkage"></w-picker>
		
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	import html2canvas from 'html2canvas'
	import {
		apiBaseURL
	} from '../../../common/config.js'
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				guanxi:'',
				linkageVisible: false,
				defaultProps1: {
					label: "name",
					value: "name",
					children: "child"
				},
				options: [{
					id: '同辈',
					name: '同辈',
					child: []
				},{
					id: '小辈',
					name: '小辈',
					child: []
				},{
					id: '长辈',
					name: '长辈',
					child: []
				}],
				chatDia: false,
				addimg: '',
				familyId: '',
				list: [],
				showShareDia: false,
				nowUser: '',
				val: '', // 要生成的二维码值
				size: 400, // 二维码大小
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				checked:{}
			};
		},
		onLoad(e) {
			if (e.familyId) {
				this.familyId = e.familyId
				this.getData()
			}
		},

		methods: {
			toChat(item){
				console.log(item)
			  	// let guanxi = this.guanxi
			  	let familyMemberId = item.id
			  	let avatar = item.avatar?item.avatar:''
				this.checked = item
				
				this.$api.queryFamilyMemberRelation({familyMemberId}).then(res => {
					if (res) {
						this.guanxi = res
					} 
					this.$api.getRelation({familyMemberId}).then(res2 => {
						console.log(res2)
						let tongbei = []
						if(res2.equal.length>0){
							res2.equal.forEach(item=>{
								tongbei.push({
									name:item
								})
							})
						}
						
						let xiaobei = []
						if(res2.younger.length>0){
							res2.younger.forEach(item=>{
								xiaobei.push({
									name:item
								})
							})
						}
						
						let zhangbei = []
						if(res2.elder.length>0){
							res2.elder.forEach(item=>{
								zhangbei.push({
									name:item
								})
							})
						}
						
						this.options[0].child = tongbei
						this.options[1].child = xiaobei
						this.options[2].child = zhangbei
						
						console.log(this.options)
						this.chatDia = true
					})
					
				
					
				
				
				})
			  	
			  
			},
			start(){
				
				
				
				this.chatDia = false
				let guanxi = this.guanxi
				let familyMemberId =this.checked.id
				let avatar = this.checked.avatar?this.checked.avatar:''
				let familyId = this.familyId
				
				uni.navigateTo({
					url: `/pages/chat/chat?guanxi=${guanxi}&familyMemberId=${familyMemberId}&avatar=${avatar}&familyId=${familyId}`
				})
				
				
				
			},
			onConfirmguanxi(e){
			   // 绑定关系	
			   let data = {
				   relation:e.value[1],
				   familyMemberId:this.checked.id
			   }
			   this.$api.upsertFamilyMemberRelation(data).then(res=>{
				   console.log(res)
				   this.guanxi = e.value[1]
				   
			   })
			},
			// 分享给好友
			onShareAppMessage(options) {
				let that = this
				let inviterFamilyId = that.familyId
				let inviterUsername = uni.getStorageSync('username') ? uni.getStorageSync('username') : ''
				let matchedFamilyMemberId = that.nowUser.id

				var shareObj = {
					title: `邀请${that.nowUser.nickname}加入家庭`, // 默认是小程序的名称(可以写slogan等)
					desc: '', // 小程序的描述
					path: `/pages/tabbar/index/index?inviterFamilyId=${inviterFamilyId}&inviterUsername=${inviterUsername}&matchedFamilyMemberId=${matchedFamilyMemberId}`, // 默认是当前页面，必须是以‘/’开头的完整路径
					imageUrl: '', // 图片封面，本地文件路径、网络图片路，支持PNG及JPG，默认当前页面截图，显示图片长宽比是 5:4。
					success: function(res) {
						// 转发成功之后的回调

						if (res.errMsg == 'shareAppMessage:ok') {
							console.log(res)

						}
					},

				}

				// 返回shareObj
				return shareObj;
			},
			saveQrcode() {
				html2canvas(document.querySelector("#imgimg"), {
					useCORS: true
				}).then(canvas => {
					const file = document.createElement("a");
					file.style.display = "none";
					file.href = canvas.toDataURL("image/jpg");
					file.download = decodeURI('文件名');
					document.body.appendChild(file);
					file.click();
					document.body.removeChild(file);
				});
			},
			copyaddress() {
				uni.setClipboardData({
					data: this.val, // e是你要保存的内容
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
			qrR(res) {
				this.src = res
			},
			toInfo(item){
				console.log(item)
				// uni.previewImage({
				// 	urls:[img],
				// 	current:0
				// })
				let id = item.id
				let username = item.username?item.username:''
				let familyId = item.familyId?item.familyId:''
				if(username){
					uni.navigateTo({
						url:`/pages/card/index?id=${id}&username=${username}&familyId=${familyId}`
					})
				}else{
					uni.navigateTo({
						url:`/pages/card/index?id=${id}&familyId=${familyId}`
					})
				}
			},
			share(item) {

				let inviterFamilyId = this.familyId
				let inviterUsername = uni.getStorageSync('username') ? uni.getStorageSync('username') : ''
				let matchedFamilyMemberId = item.id
				this.nowUser = item
				console.log(this.nowUser)
				// #ifdef MP-WEIXIN
				let data = {
					envVersion: 'trial',
					path: `/pages/tabbar/index/index?inviterFamilyId=${inviterFamilyId}&inviterUsername=${inviterUsername}&matchedFamilyMemberId=${matchedFamilyMemberId}`,
					width: '430',
					base: {
						requestId: Math.floor(Math.random() * 1000000000) + '',
						clientId: 'minghui',
						debugMore: false
					}
				}
				var that = this

				uni.request({
          url: `${apiBaseURL}/getWxWpACode`,
					data: data,
					responseType: 'arraybuffer', //必填项，否则保存不了arrayBuffer格式
					method: "POST",
					header: {
						'content-type': 'application/json'
					},
					success(res) {
						console.log(res)
						const arrayBuffer = new Uint8Array(res.data) //将二进制数据保存为arrayBuffer格式

						that.addimg = 'data:image/png;base64,' + uni.arrayBufferToBase64(arrayBuffer)
					},
					fail(e) {}
				})

				// #endif
				// #ifndef MP-WEIXIN
				this.val =
					`${apiBaseURL}/#/pages/tabbar/index/index?inviterFamilyId=${inviterFamilyId}&inviterUsername=${inviterUsername}&matchedFamilyMemberId=${matchedFamilyMemberId}`
				// #endif

				console.log(item)
				this.showShareDia = true
			},
			getData() {
				let data = {
					familyId: this.familyId,
				}
				this.$api.queryFamilyMember(data).then(res => {
					console.log(res)
					this.list = res.list
				})
			}
		}
	};
</script>

<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss">
	.showShare {
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;

		.downLoadBox {
			padding: 40rpx 50rpx 20rpx 50rpx;
		}

		.title {
			text-align: center;
			margin-bottom: 30rpx;
			color: #747474;
			letter-spacing: 1px;
			font-size: 28rpx;

		}

		.btns {
			display: flex;
			margin-top: 40rpx;
			justify-content: space-between;
			align-items: center;
			padding: 0 50rpx 30rpx 50rpx;

			view {
				width: 45%;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #de4849;
				color: #fff;
				border-radius: 10rpx;
				font-size: 28rpx;
				position: relative;
			}

			.shareBtn {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				background-color: red;
				z-index: 10;
				opacity: 0;
			}
		}
	}

	.xuanke {
		width: 60%;
		margin: 0 auto;
		box-shadow: 0 0 3px #ccc;
		border-radius: 20rpx;
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		.list {
			width: 33%;
			padding: 20rpx;
			background-color: #fff;
			box-sizing: border-box;
			border-right: 1px solid #e1e1e1;
			margin-bottom: 10px;
			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f5f5f5;
				padding-bottom: 15rpx;
				font-size: 30rpx;
				min-height: 50px;
			}
		}
		
		.btn{
			width: 40%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			background-color: #0072ff;
			color: #fff;
			font-size: 30rpx;
			margin: 20px auto;
			cursor: pointer;
		}

		.main {
			padding-top: 15rpx;
			border-bottom: 1px solid #f5f5f5;

			.box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 23rpx;
				font-size: 28rpx;
			}

			.seeMore {
				font-size: 26rpx;
				text-align: center;
				color: #0081ff;
				padding-bottom: 20rpx;
			}
		}

		.bodernone {
			border: none;
		}
	}
	
	.chatDiaBox {
		width: 700rpx;
		box-sizing: border-box;
		padding: 30rpx;
		height: 400rpx;
		
		.listbox {
			background-color: #245dff;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 10rpx;
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;
			color: #fff;
			font-size: 30rpx;
		}
	
		.title {
			text-align: center;
			margin-bottom: 30rpx;
			margin-top: 10rpx;
		}
	
		.check {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #ccc;
			font-size: 28rpx;
			border-radius: 10rpx;
		}
	}
</style>